<template>
	<view class="order-tabs">
		<view class="order-tabs-item" v-for="(item,index) in tabList" :key="index" @tap="change(item, index)">
			<view :class="{active: currentIndex === index}">
				{{item.name}}				
			</view>		
			<view :class="{'under-line': currentIndex === index}" ></view>
			<view class="badge" v-if="item.showCount && item.total>=1" >
				<text class="text">{{item.total}}</text>
			</view>						
		</view>		
	</view>
</template>
<script>
export default {
	props:{
		current: {
			type: Number, default: 0
		},
		tabList: {
			type: Array, required: true
		}		
	},
	watch:{
		current(val){
			// console.log('val:::', val)
			this.currentIndex = val
		}
	},
	data() {
		return {
			currentIndex:0
		}
	},
	methods: {
		change(item, index) {
			this.$emit('change', index)
		}
	}
}
</script>
<style lang="less">
.order-tabs{
	background: #fff;
	height: 80rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: relative;
	.order-tabs-item{
		flex-grow: 1;
		.flex-normal-center;
		position: relative;
		.active{
			font-weight: 600;
		}
		.under-line{
			height: 8rpx;
			width: 30rpx;
			border-radius: 4rpx;
			position: absolute;
			bottom: 0;
			background: #1B2431;
		}
		.badge{
			min-width: 38rpx;
			height: 24rpx;
			position: absolute;
			top: 6rpx;
			right:0;			
			font-size: 20rpx;
			color: #fff;
			background: #FF5944;
			border-radius: 11rpx;
			.flex-normal-center;
			.text{
				transform: scale(0.8)
			}
		}
	}
}
</style>